<template>
	<view class="" style="padding-bottom: 130rpx;">
		<view class="content">
			<view class="chwl">
				<u-image border-radius="6" width="164rpx" height="137rpx" :src="info.logo"></u-image>
				<view class="chwl-right">
					<uni-title title="">{{info.title}}</uni-title>
					<view class="" style="color: #fd5049;margin: 13rpx 0;">
						{{info.qg_time}}
					</view>
					<view class="chwl-right1" v-if="info.distance">
						<text>距离{{info.distance<1?(info.distance*1000).toFixed(0)+'m':(info.distance).toFixed(2)+'km'}}</text>
					</view>
				</view>
			</view>
			<text class="dz">地址：{{info.address}}</text>
			<view class="cpsm">
				<view class="" style="font-weight: bold;">
					产品说明
				</view>
				<view class="uni-textarea">
				      <u-parse :html="info.content"></u-parse>
				 </view>
			</view>
			<view class="yhlc">
				<view class="" style="font-weight: bold;">
					优惠流程
				</view>
				<view class="uni-textarea">
				            <u-parse :html="info.sale_content"></u-parse>
				            </view>
			</view>
			<view class="tbsm">
				<view class="" style="font-weight: bold;">
					特别说明
				</view>
				<view class="uni-textarea">
				            <u-parse :html="info.declare"></u-parse>
				</view>
			</view>
			<view class="tbsm">
				<view class="" style="font-weight: bold;">
					上传凭证
				</view>
				<view class="uni-textarea">
					<view class="icon" @tap="chooseImg" v-if="!info.order.img">
						<u-icon name="plus" color="#ddd" size="60"></u-icon>
					</view>
				    <image :src="info.order.img" mode="" @tap="chooseImg" v-else></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="mini-btn" type="default" size="mini" v-if="info.order.status===0" @tap="upload">上传凭证</button>
			<button class="mini-btn" style="color: rgba(0,0,0,.3);background-color: #f7f7f7;" type="default" size="mini" :disabled="true" v-else>{{info.order.status===1?'待结算':'已结算'}}</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:{}
			}
		},
		onLoad() {
			this.info = uni.getStorageSync('detailInfo')
		},
		methods:{
			chooseImg(){
				let that = this
				if(this.info.order.status===0){
					uni.chooseImage({
					    count: 1, //默认9
					    success: function (res) {
							that.info.order.img = res.tempFilePaths[0]
					    }
					});
				}
			},
			upload(){
				let that = this
				uni.showLoading()
				uni.uploadFile({
					url: that.$u.http.config.baseUrl+'/wxapi/Api/upload_file', //仅为示例，非真实的接口地址
					filePath: that.info.order.img,
					name: 'img',
					formData: {
						'token': that.vuex_token.accessToken,
						'id':that.info.order.id
					},
					success: (uploadFileRes) => {
						if(uploadFileRes.statusCode===200){
							that.info.order.status = 1
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '上传凭证成功'
							});
						}else{
							uni.showToast({
								icon: 'none',
								title: '上传失败'
							});
						}
						
					},
					fail:(err) => {
						uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		padding:0 30rpx;
		box-sizing: border-box;
	}
	.content .btn{
		background-color: red;
		position: fixed;
		bottom: 0rpx;
	}
	.cpsm{
		margin-top: 30rpx;
	}
	.chtit{
		font-size: 40rpx;
		margin-left: 20rpx;
		margin-bottom: 40rpx;
	}
	.chwl{
		
		box-sizing: border-box;
		display: flex;
		background-color: #fff;
		position: relative;
		padding:30rpx 0rpx;
	}
	.chwl-right{
		flex: 1;
		margin-left: 18rpx;
	}
	.chwl-right1{
		color:#c8c8c8 ;
	}
	.ql-container{
		height: 100rpx;
	}
	.footer{
		position: fixed;
		bottom: 0;
		height: 124rpx;
		width: 100%;
		padding: 20rpx;
	}
	.footer button{
		background-color:#fb4d4e ;
		border-radius: 50rpx;
		width: 100%;
		float: right;
		color: #fff;
		font-size: 30rpx;
		border: 0;
		height: 84rpx;
		line-height: 84rpx;
		
	}
	.footer button::after{
		border:0;
	}
	.uni-textarea{
		margin-bottom: 30rpx;
		margin-top: 20rpx;
	}
	.uni-textarea .icon{
		border: 1rpx dashed #aaa;
		width: 200rpx;
		height: 200rpx;
		border-radius: 14rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	.uni-textarea image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 14rpx;
		margin-top: 10rpx;
	}
</style>
